import React from "react";
import { Layout, Menu, Button, theme, Avatar, Dropdown } from 'antd';
import { useDispatch, useSelector } from "react-redux";
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
import './index.css'
import { collapseMenu,clearTabList } from "../../store/reducers/tab";
import { useNavigate } from "react-router-dom";

const { Header, Sider, Content } = Layout;



const CommonHeader = ({ collapsed }) => {
    //创建dispatch
    const dispatch = useDispatch()
    const navigate = useNavigate()

    const loginout = () => {
        //清除token
        localStorage.removeItem('token')
        localStorage.removeItem('menu')
        //将面包屑的数据清空
        dispatch(clearTabList())


        //跳转到登录页面
        navigate('/login')


    }

    const items = [

        {
            key: '1',
            label: (
                <a target="_blank" rel="noopener noreferrer" >
                    个人中心
                </a>

            )
        },
        {
            key: '2',
            label: (
                <a target="_blank" rel="noopener noreferrer" onClick={() => loginout()} >
                    退出
                </a>

            )
        }

    ];

    //点击展开收齐菜单的按钮
    const setCollapsed = () => {
        //传递进来的是false
        console.log(collapsed)

        dispatch(collapseMenu())



    }





    return (
        <Header className="header-container"

        >
            <Button type="text"

                icon={<MenuFoldOutlined></MenuFoldOutlined>}

                style={{
                    fontSize: '16px',
                    width: 64,
                    height: 34,
                    backgroundColor: '#fff'
                }}
                onClick={() => setCollapsed()}
            ></Button>
            <Dropdown
                menu={{ items }}
            >
                <Avatar size={36} src={<img src={require('../../assets/user.png')}></img>} />


            </Dropdown>

        </Header>
    )
}
export default CommonHeader;